<template>
    <div class="right_click_wp" :style="{ width: menuInfo?.w + 'px', height: menuInfo?.h + 'px' }">
        <div class="left_bg"><span>webStock</span></div>
        <ul class="right_list" :style="{ height: menuInfo?.h + 'px' }">
            <li :class="{ focus_li: item.disabled != 1 }" v-for="(item, index) in menuInfo?.childern" :key="index"
                @click="menuTap(item)" @mouseenter="headMouseenter($event, item, index)">
                <i class="iconfonMy icon-duigou1" v-show="item.isChecked == 1 || item.isRadio == 1"></i>
                <div class="ml_right" :class="{ menu_split: item.isSplit == 1, font_color: item.disabled == 1 }">
                    <span class="menu_name">{{ item.name }}</span>
                    <span class="menu_Kj">{{ item.kj }}</span>
                    <i class="iconfonMy icon-sanjiao" v-if="item.childern"></i>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const { ipcRenderer } = require('electron');
import { throttle } from 'lodash'

import rightClickData from '@/components/view_list/utils/rightclickdata.js'


const menuInfo = ref({})
ipcRenderer.on('right-click-menu', (e, v) => {
    let obj = { ...v, ...rightClickData[v.pidx] }
    obj.childern = obj.childern.map(item => {
        item.isChecked = item.isChecked && localStorage.getItem(item.name) || item.isChecked
        item.isRadio = item.isRadio && localStorage.getItem(item.name) || item.isRadio
        return item
    })
    menuInfo.value = obj
})
const menuTap = throttle(function (v) {
    if (v.disabled == 1) return
    if (v.isRadio) {
        v.isRadio = v.isRadio == 1 ? 2 : 1
        menuInfo.value.childern = menuInfo.value.childern.map(item => {
            if (item.name != v.name && item.isRadio) {
                item.isRadio = 2
            }
            localStorage.setItem(item.name, item.isRadio)
            return item
        })
    }
    if (v.isChecked) {
        v.isChecked = v.isChecked == 1 ? 2 : v.isChecked == 2 ? 1 : undefined;
        localStorage.setItem(v.name, v.isChecked)
    }
    if (v.click) {
        v.click(v)
        ipcRenderer.send('hide-right-click-menu')
    }
}, 2000)
function headMouseenter(e, v, idx) {
    let menu = menuInfo.value
    ipcRenderer.send('hide-right-click-menu-2')
    ipcRenderer.send('hide-right-click-menu-3')
    if (v.childern && v.childern.length > 0) {
        const rect = e.target.getBoundingClientRect();
        ipcRenderer.send('open-right-click-2', { x: menu.x + menu.w - 7, y: menu.y + rect.top - 5, w: v.childernWidth, h: v.childernHeight, pidx: menu.pidx, idx })
    }
}
</script>

<style scoped lang="less">
.right_click_wp {
    color: #303133;
    background-color: #f0f0f0;
    overflow: hidden;
    position: relative;
    font-size: 13px;

    .left_bg {
        background-color: #a8c2dc;
        width: 20px;
        position: absolute;
        top: 2px;
        left: 2px;
        height: calc(100% - 4px);

        span {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
            position: absolute;
            bottom: 0;
            left: 3px;
            font-size: 22px;
            font-weight: bold;
            line-height: 18px;
            font-family: '仿宋';
            color: #fff;
        }
    }

    .right_list {
        padding: 3px 0;
        line-height: 20px;
        line-height: 24px;
        z-index: 100;

        li {
            position: relative;
            padding-left: 30px;

            .icon-duigou1 {
                position: absolute;
                top: 4px;
                left: 3px;
                width: 18px;
                height: 18px;
                line-height: 14px;
                text-align: center;
                font-size: 11px;
                border: 2px solid #3991d8;
            }

            .ml_right {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-right: 8px;
                margin-right: 5px;

                .icon-sanjiao {
                    transform: rotate(-90deg);
                    position: absolute;
                    right: 5px;
                }
            }

            .menu_split {
                border-bottom: 2px solid #d0d0d0;
            }

            .font_color {
                color: #c5c5c5;
            }
        }

        .focus_li:hover {
            background-color: #b9d1eb;
        }
    }
}
</style>
